<template>
    <view class="page">
        <view class="content-view">
            <view class="content-text-view">
                <text>该功能可以根据您填写的当前财富数值，从当前时刻往早些时间推算，直到您最早在系统中留下的记账记录。统计在该时间区间内您每一天的财富情况，包括支出、收入、结余、账户余额。
                    该功能可能耗时较长，请耐心等待。
                </text>
            </view>
        </view>

        <view class="body-view">
            <view>
                <text style="color: #858585;">总资产：</text>
                <u--input placeholder="截止当前您的总财富" v-model="totalAssets" border="surround" type="digit"
                    clearable></u--input>
                <text style="color: #858585;">{{ totalAssetsToChinese(totalAssets) }}</text>
            </view>
            <view>
                <u-button class="button-style" text="重新计算" type="primary" :disabled="totalAssets == ''"
                    @click="showLogout = true"></u-button>
                <u-modal :show="showLogout" :title="'慢服务请求提示'" :showCancelButton="showCancelButton" :asyncClose="true"
                    :content="'当前服务请求速度取决于您在系统中的数据量，请耐心等待！'" confirmText="我已知晓" @cancel="showLogout = false"
                    @confirm="recalculate"></u-modal>
            </view>
        </view>
    </view>
</template>

<script>
import { numberToChinese } from "@/utils/commonUtil";
import { handleDailyHistory } from "@/api/finance";
export default {
    data() {
        return {
            showLogout: false,
            showCancelButton: true,
            totalAssets: '',
            duration: 2000
        }
    },
    methods: {
        recalculate() {
            this.showCancelButton = false

            handleDailyHistory({ totalAssets: this.totalAssets }).then(res => {
                this.showLogout = false
            }).catch(err => {
            }).finnly(() => {
                this.showLogout = false
            })
        },
        totalAssetsToChinese() {
            return numberToChinese(this.totalAssets)
        }
    }
}
</script>

<style scoped>
.page {
    background-color: #fff;
    height: 100vh;
}

.content-view {
    display: flex;
    padding: 30rpx;
}

.content-text-view {
    background-color: #f8f8f8;
    border-left: 10rpx solid #42b983;
    padding: 20rpx;
    color: #858585;
}

.body-view {
    padding: 30rpx;
}

.button-style {
    margin-top: 30rpx;
}
</style>
